<template>
    <div>
      <div v-show="isShow">isShow条件渲染基本使用</div>
      <h2>v-show和v-if的区别</h2>
      <!-- 1.使用v-if -->
      <h2 v-if="isShow2">v-if控制显示和隐藏</h2>
      <!-- 2.使用v-show -->
      <h2 v-show="isShow2">v-show控制显示和隐藏</h2>
      <!-- 3.v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。 -->
      <button @click="toggle">单击切换显示和隐藏内容</button>
    </div>
  </template>
  
  <!-- <script>
  export default {
    name: 'vshow',
    data() {
      return {
        isShow: true,
        isShow2: true
      }
    },
    methods: {
      toggle() {
        this.isShow2 = !this.isShow2
      }
    }
  }
  </script> -->
  <script setup>
  defineOptions({
    name: 'vshow'
  })
  import { ref } from 'vue'
  const isShow = ref(true)
  const isShow2 = ref(true)
  const toggle = () => {
    isShow2.value = !isShow2.value
  }
  </script>
  <style lang="scss" scoped></style>
  